<template>
  <div class="cartcontrol">
    <div class="cart-decrease">-</div>
    <div class="cart-count">1</div>
    <div @click="addNum" class="cart-add">+</div>
  </div>
</template>

<script>
export default {
    methods:{
        addNum(e){
            let addEle = e.target;
            // console.log(addEle);
            // console.log("触发addNum事件")
            this.$emit("addNum",addEle)
        }
    }



};
</script>

<style>
.cartcontrol {
  position: absolute;
  width: 140px;
  height: 45px;
  display: flex;
  line-height: 48px;
  font-size: 20px;
  color:rgb(147, 153, 159);
  right: 20px;
  bottom: 10px;
}
.cart-decrease {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid rgb(71, 157, 215);
  text-align: center;
  line-height: 40px;
  color: rgb(71, 157, 215);
  font-size: 30px;
  margin-right: 24px;
}
.cart-add {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgb(71, 157, 215);
  text-align: center;
  line-height: 40px;
  color:white;
  margin-left: 20px;
}
</style>